<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<!-- <div><input type="text" name="num1" v-model="num1"/></div> -->
			<!-- v-on:click  其中v-on:可以简化为@ -->
			<p>{{num1}}</p>
			<button type="button" v-on:click="num1++">自增</button>
			<button type="button" @click="num1++">自增简化</button>
			<!-- 如果没有参数 括号可以省略 -->
			<button type="button" @click="addN()">自增函数</button>
			<button type="button" @click="addN">自增函数不带括号</button>
			<button type="button" @click="substract()">自减函数</button>
			
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const APP=new Vue({
				el:'#app',
				data:{
					msg:"",
					num1:1,		
				},
				methods:{
					addN:function(){
						this.num1++
					},
					
					substract(){//用this是因为这里不能直接看到data里面的属性
						this.num1--
					},//逗号不能忘！！！
					
				}
				
			})
			
		</script>
	</body>
</html>
